<template>
    <div style="width: 100%;margin: 10px auto;">
        <div class="operation" >
            <el-row type="flex" class="row-bg" justify="start" >
                <el-input placeholder="请输入患者名" prefix-icon="el-icon-search" clearable @clear="initData"
                      style="width: 450px;margin-right: 10px" v-model="keyword" @keydown.enter.native="search">
                </el-input>
                <el-button icon="el-icon-search" type="primary" @click="search">
                   搜索
                </el-button>
                <el-col >
                   <el-button type="primary" icon="el-icon-plus"  @click="addDepAction">
                       添加病人
                   </el-button>
                </el-col>
            </el-row>
        </div>
        <el-table :fit="true" :data="patient" :header-cell-style="{background:'#c3e0cd',color:'#606266'}" border style="margin: 15px">
            <el-table-column type="selection" min-width="55" ></el-table-column>
            <el-table-column fixed prop="id" label="病人id"  v-if="false"></el-table-column>
            <el-table-column prop="name" label="病人姓名" min-width="80"></el-table-column>
            <el-table-column prop="sex" label="性别" min-width="50"></el-table-column>
            <el-table-column prop="status" label="状态" min-width="130">
                <template slot-scope="scope">
                 <el-switch
                        v-model="scope.row.status"
                        :active-value="false"
                        :inactive-value="true"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="出院"
                        inactive-text="住院"
                        @change="changeStatus(scope.row)"
                       />
                </template>
            </el-table-column>
            <el-table-column prop="diagnosis" label="患病描述" min-width="80"></el-table-column>
            <el-table-column prop="doctorId" label="主治医生Id" v-if="false"></el-table-column>
            <el-table-column prop="doctorName" label="主治医生姓名" min-width="100"></el-table-column>
            <el-table-column prop="time" label="诊断时间" min-width="150"></el-table-column>
            <el-table-column fixed="right" label="操作" min-width="170">
                <template slot-scope="scope">
                    <el-button @click="deleteClick(scope.row)" type="danger" round size="small">删除</el-button>
                    <el-button :disabled="scope.row.status" @click="editData(scope.row)" type="primary" round size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form :model="form">
                <el-form-item label="患者名称" :label-width="formLabelWidth"  >
                    <el-input v-model="form.name" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="患者性别" :label-width="formLabelWidth">
                    <el-input v-model="form.sex" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="患者住院状态" :label-width="formLabelWidth" v-if="false" >
                    <el-switch
                            v-model="form.status"
                            :active-value="false"
                            :inactive-value="true"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="出院"
                            inactive-text="住院"
                            @change="changeStatus(scope.row)"
                    />
                </el-form-item>
                <el-form-item label="患病描述" :label-width="formLabelWidth">
                    <el-input v-model="form.diagnosis" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="主治医生" :label-width="formLabelWidth">
                    <el-select v-model="form.doctorId" :placeholder="form.doctorName">
                        <el-option v-for = "item in doctors" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="clearForm">取 消</el-button>
                <el-button type="primary" @click="pushData">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="提示"
                :visible.sync="editDialogVisible"
                width="30%">
            <el-form :model="form">
                <el-form-item label="患者名称" :label-width="formLabelWidth"  >
                    <el-input v-model="form.name" autocomplete="off" disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="患者性别" :label-width="formLabelWidth">
                    <el-input v-model="form.sex" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="患者住院状态" :label-width="formLabelWidth" v-if="false">
                        <el-switch
                                v-model="form.status"
                                :active-value="false"
                                :inactive-value="true"
                                active-color="#ff4949"
                                inactive-color="#13ce66"
                                active-text="出院"
                                inactive-text="住院"
                                @change="changeStatus(scope.row)"
                        />
                </el-form-item>
                <el-form-item label="患病描述" :label-width="formLabelWidth">
                    <el-input v-model="form.diagnosis" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="主治医生" :label-width="formLabelWidth">
                    <el-select v-model="form.doctorId" :placeholder="form.doctorName">
                        <el-option v-for = "item in doctors" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="clearForm">取 消</el-button>
                <el-button type="primary" @click="pushEditData">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="提示"
                :visible.sync="addPatientSuccess"
                width="30%">
            请为该病人分配病床，否则该病人无法出院
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addPatientSuccess = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import MY from "../../global_variable";

    export default {
        name: "Patient",
        data(){
            return {
                addPatientSuccess:false,
                keyword:'',
                patient:[],
                dialogVisible:false,
                editDialogVisible:false,
                form: {
                    name: '',
                    sex:'',
                    status:true,
                    diagnosis:'',
                    doctorId:'',
                    time:'',
                    doctorName:'',
                    id:''
                },
                doctors:[],
                formLabelWidth: '120px',
                total:0,
                currentPage:1,
                pageSize:5,
                patients:[]
            }
        },
        mounted(){
            this.initData()
        },
        methods:{
            search(){
                var pn={
                    name:this.keyword
                }
                this.getRequest(MY.myURL+'/patient/fuzzyQueryByPatientName',pn).then(resp=>{
                    console.log(resp)
                    if(resp.data.code=='4010'){
                        this.patients=resp.data.data
                        this.total=this.patients.length
                        let begin=0
                        let end=0
                        if(Math.ceil(this.total/this.pageSize)<this.currentPage){
                            begin=0
                            end=this.pageSize
                            this.currentPage=1
                        }else{
                            begin=(this.currentPage-1)*this.pageSize
                            end=(this.currentPage*this.pageSize)
                        }
                        this.patient=this.patients.slice(begin,end)
                        console.log('-----------------------')
                        console.log(this.patient)
                        console.log('-----------------------')
                        for(var i=0;i<this.patient.length;i++){
                            this.$set(this.patient[i],'doctorName','暂无')
                            console.log(this.patient[i])

                        }
                        for(var j=0;j<this.patient.length&&this.patient[j].doctorId;j++){
                            var item=this.patient[j]
                            var p={
                                id:item.doctorId
                            }
                            console.log(p)
                            this.fu(item,p)
                        }

                    }
                })
            },
            changeStatus(row){
                var pn={
                    id:row.id,
                    status:row.status
                }
                if(row.status==false){

                    this.$confirm('是否出院', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        }).then(()=>{
                        this.getRequest(MY.myURL+'/patient/updatePatientByStatus',pn).then(resp=>{
                            if(resp.data.code=='4009'){
                                this.$message({
                                    type: 'success',
                                    message: resp.data.message
                                });
                                this.pageRequest(this.currentPage,this.pageSize)
                            }else if(resp.data.code=='4011'){
                                this.$message({
                                    message: '该病人没有分配病房，不可以出院',
                                    type: 'error'
                                });
                                this.pageRequest(this.currentPage,this.pageSize)
                            }
                        })
                    }).catch(()=>{
                        this.$message({
                            type: 'info',
                            message: '已取消出院'
                        });
                        this.pageRequest(this.currentPage,this.pageSize)
                    })

                }else{
                    console.log(row)
                    this.$confirm('是否入院', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(()=>{
                        this.getRequest(MY.myURL+'/patient/updatePatientByStatus',pn).then(resp=>{
                            if(resp.data.code=='4009'){
                                this.$message({
                                    type: 'success',
                                    message: '记得为病人分配病床，否则病人将无法出院'
                                });
                                this.pageRequest(this.currentPage,this.pageSize)
                            }
                        })
                    }).catch(()=>{
                        this.$message({
                            type: 'info',
                            message: '已取消入院'
                        });
                        this.pageRequest(this.currentPage,this.pageSize)
                    })
                }

             },
            handleSizeChange: function (size) {
                this.pageSize = size;
                console.log(this.pageSize)  //每页下拉显示数据
                if(this.keyword!=''){
                    this.search()
                }else{
                    this.pageRequest(1,this.pageSize)
                }

            },
            handleCurrentChange: function(currentPage){

                this.currentPage = currentPage;
                if(this.keyword!=''){
                    this.search()
                }else{
                    this.pageRequest(currentPage,this.pageSize)
                }
                console.log(this.currentPage)  //点击第几页
            },
            pageRequest(start,size){
                var pn={
                    pageNum:start,
                    pageSize:size
                }
                this.getRequest(MY.myURL+'/patient/getPatientByPage',pn).then(resp=>{
                    console.log('分页')
                    console.log(resp)
                    if(resp){
                        this.patient=resp.data.data.listPros
                        this.total=resp.data.data.total
                        this.currentPage=pn.pageNum
                        /*for(var i=0;i<this.patient.length;i++){
                            this.$set(this.patient[i],'doctorName','暂无')
                            console.log(this.patient[i])

                        }
                        for(var j=0;j<this.patient.length&&this.patient[j].doctorId;j++){
                            var item=this.patient[j]
                            var p={
                                id:item.doctorId
                            }
                            console.log(p)
                           this.fu(item,p)

                        }*/
                    }
                })

            },
            async fu(item,p){
                console.log("koko")
                await this.getRequest(MY.myURL+'/patient/getDoctorNameByDoctorId',p).then(resp1=>{
                    console.log(resp1)
                    //if(resp1.data.code=='4009'){
                        console.log('请求单条数据 ')
                        console.log(item)
                        item.doctorName=resp1.data
                        console.log(item)
                        console.log('请求单条数据')

                   // }
                })
            },
            deleteClick(row){
                console.log(row.id)
                var path = MY.myURL + '/patient/deleteOnePatient/'
                this.$confirm('此操作将永久删除病人名为 '+row.name+'的数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var pn={
                        id:row.id
                    }
                    this.getRequest(path,pn).then(resp => {
                        console.log(2)
                        console.log(resp)
                        console.log(2)
                        if (resp.data.code == '4005') {
                            console.log(3)
                            this.$message({
                                type: 'success',
                                message: resp.data.message
                            });
                            console.log(3)

                            if(this.patient.length==1){
                                this.pageRequest(this.currentPage-1,this.pageSize)

                            }else{
                                this.pageRequest(this.currentPage,this.pageSize)
                            }
                        } else {
                            this.$message({
                                type: 'error',
                                message: resp.data.message
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })

            },
            pushEditData(){
                console.log(this.form)
                this.getRequest(MY.myURL+'/patient/updatePatient',this.form).then(resp=>{
                    console.log(resp)
                    if(resp.data.code=='4009'){
                        this.$message({
                            message: resp.data.message,
                            type: 'success'
                        });
                        this.clearForm()
                        //this.refreshData()
                        this.pageRequest(this.currentPage,this.pageSize)
                    }
                })

            }

            ,
            refreshData(){
                this.initData()

            },
            editData(row){
                console.log(this.patient)
                console.log(row)
                this.initForm(row)
                this.getRequest(MY.myURL+'/doctor/getAllDoctors').then(resp=>{
                    if(resp.data.code=='4010'){
                        this.doctors=resp.data.data
                    }
                    console.log(resp)
                })
            },
            initData(){
                this.pageRequest(1,5)
            },
            addDepAction(){
                this.dialogVisible=true
                this.getRequest(MY.myURL+'/doctor/getAllDoctors').then(resp=>{
                    if(resp.data.code=='4010'){
                        this.doctors=resp.data.data

                    }
                    console.log(resp)
                })
            },
            pushData(){
                this.dialogVisible=false
                this.getRequest(MY.myURL+'/patient/insertPatient',this.form).then(resp=>{
                    console.log(resp)
                    if(resp.data.code=='4001'){
                        if(this.keyword!=''){
                            this.search();
                        }else{
                            this.pageRequest(Math.ceil((this.total+1)/this.pageSize),this.pageSize)

                        }
                        this.$message({
                            message: resp.data.message+'  尚未该病人分配病房，请提示该病人前往住院中心申请病床',
                            type: 'success'
                        });
                        this.addPatientSuccess=true
                        this.clearForm()
                    }

                })
            }
            ,
            clearForm(){
                this.form.id=''
                this.form.name=''
                this.form.sex=''
                this.form.status=''
                this.form.diagnosis=''
                this.form.doctorId=''
                this.form.doctorName=''
                this.editDialogVisible=false
            },
            initForm(row){
                this.form.id=row.id
                this.form.name=row.name
                this.form.sex=row.sex
                this.form.status=row.status,
                    this.form.diagnosis=row.diagnosis
                this.form.doctorId=row.doctorId
                this.form.doctorName=row.doctorName
                this.editDialogVisible=true
            }
        }
    }
</script>

<style scoped>

</style>
